<!--
 * @Author: 迩安 14166156+zxp_lzu@user.noreply.gitee.com
 * @Date: 2024-08-09 14:41:26
 * @LastEditors: 迩安 14166156+zxp_lzu@user.noreply.gitee.com
 * @LastEditTime: 2024-08-13 13:59:32
 * @FilePath: \demo_web\src\views\datashow.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: 迩安 14166156+zxp_lzu@user.noreply.gitee.com
 * @Date: 2024-08-09 14:41:26
 * @LastEditors: 迩安 14166156+zxp_lzu@user.noreply.gitee.com
 * @LastEditTime: 2024-08-12 14:13:34
 * @FilePath: \demo_web\src\views\datashow.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref,onMounted } from 'vue'
import { showTableService } from '@/api/tableshow'
import { showTableNamesService } from '@/api/tableNameShow';

const table = ref({
    tableName:'t_emp',
    tableType:0
})

const tableData = ref([])
const headers = ref([])
const datasets = ref([])
const expanded = ref(Array(datasets.value.length).fill(false))


const toggleDataset = (index) => {
  expanded.value[index] = !expanded.value[index]
}


const showTable = async()=>{
    let result = await showTableService(table.value)
    console.log(result)
    tableData.value = result.data;
    headers.value = Object.keys(result.data[0])
}

const showTableName = async()=>{
  let result = await showTableNamesService()
    console.log(result.data)
    datasets.value = result.data

    
}

const showTableInfo = async()=>{
    let result = await showTableService(table.value)
    console.log(result)
    tableData.value = result.data;
    headers.value = Object.keys(result.data[0])
}

function chooseType() {
  console.log(table.value)
  if (table.tableType === 0){
    showTable()
  }else{
    showTableInfo()
  }
}



onMounted(() => {
  showTableName();
});
</script>

<template>
  <div class="container">
    <div class="left-list">
      <ul>
        <!-- 遍历数据集 -->
        <li v-for="(dataset, dIndex) in datasets" :key="dIndex"  class="dataset-item"  @click="toggleDataset(dIndex)">
          {{ dataset.datasetName }}
          <!-- 遍历数据集中的表 -->
          <ul  v-show="expanded[dIndex]" class="table-list">
            <li v-for="(name, tIndex) in dataset.tableNames" :key="tIndex"
              @click.stop="table.tableName = name; chooseType()">
              {{ name }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
  <div class="right-table">
    <button @click="table.tableType = 0; chooseType()">明细预览</button>
    <button  @click="table.tableType = 1; chooseType()">字段预览</button>
  <table>
      <thead>
        <tr>
          <!-- 动态生成表头 -->
          <th v-for="(value, key) in tableData[0]" :key="key">
            {{ key }}
          </th>
        </tr>
      </thead>
      <tbody>
        <!-- 遍历数据生成行 -->
        <tr v-for="(item, index) in tableData" :key="index">
          <!-- 遍历每一行的键值对生成单元格 -->
          <td v-for="(value, key) in item" :key="key">
            {{ value }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
  </template>

<style scoped>
/* 列表样式 */
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  background-color: #f4f4f4;
  padding: 10px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

li:hover {
  background-color: #ddd;
}

/* 表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #ddd;
}

.container {
  display: flex;
  justify-content: space-between;
}

.left-list {
  width: 30%; /* 调整这个宽度以适应你的布局需求 */
  background-color: #f4f4f4; /* 可选的背景色，以便于区分 */
  padding: 10px;
  box-sizing: border-box;
}

/* 外层数据集列表样式 */
.left-list ul li {
  background-color: #f4f4f4;
  padding: 10px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 1.2em; /* 较大的字体大小 */
}

/* 当鼠标悬停在数据集上时的样式 */
.left-list ul li:hover {
  background-color: #ddd;
}

/* 内层表格列表样式 */
.left-list ul li ul {
  padding-left: 20px; /* 左侧内缩，以区分层级 */
}

/* 内层表格列表项的样式 */
.left-list ul li ul li {
  background-color: #fff;
  padding: 5px;
  margin-bottom: 3px;
  font-size: 1em; /* 较小的字体大小 */
}

/* 当鼠标悬停在表格上时的样式 */
.left-list ul li ul li:hover {
  background-color: #eee;
}

.right-table {
  width: 70%; /* 相应地调整这个宽度 */
  background-color: white; /* 可选的背景色，以便于区分 */
  padding: 10px;
  box-sizing: border-box;
}

.dataset-item {
  background-color: #f4f4f4;
  padding: 10px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 1.2em;
}

/* 当鼠标悬停在数据集上时的样式 */
.dataset-item:hover {
  background-color: #ddd;
}

/* 内层表格列表样式 */
.table-list {
  padding-left: 20px;
}

/* 内层表格列表项的样式 */
.table-list li {
  background-color: #fff;
  padding: 5px;
  margin-bottom: 3px;
  font-size: 1em;
}

/* 当鼠标悬停在表格上时的样式 */
.table-list li:hover {
  background-color: #eee;
}
</style>